<template>
  <div class="personal-basic layout-content">
    <div class="user-info">
      <a-descriptions :column="1">
        <a-descriptions-item label="真实姓名">
          <span>{{ user.userData && user.userData.realName }}</span>
        </a-descriptions-item>
        <a-descriptions-item label="登录手机号">
          <c-icon type="phone" color="var(--primary)"></c-icon>
          <span>{{ user.userData && user.userData.phone }}</span>
        </a-descriptions-item>
        <a-descriptions-item label="登录密码">
          <span class="password"
            >互联网账号存在被盗风险，建议您定期更改密码以保护账号安全</span
          >
          <c-button type="link" @click="resetPassWord">去修改密码</c-button>
        </a-descriptions-item>
      </a-descriptions>
    </div>
    <a-divider dashed />
    <div class="company">
      <a-descriptions :column="1">
        <a-descriptions-item label="当前公司">
          <span>{{ user.company && user.company.companyName }}</span>
          <c-button type="link" @click="changeCompany">切换公司</c-button>
        </a-descriptions-item>
        <a-descriptions-item label="当前身份">
          <a-tag color="blue">{{
            user.userData && user.userData.roleName
          }}</a-tag>
        </a-descriptions-item>
      </a-descriptions>
    </div>
    <a-divider dashed />
    <div class="message">
      <div class="flex">
        <p class="fs-16" style="width: 110px;">消息弹窗开关</p>
        <a-switch
          v-model="messageSwitch"
          @change="changeMessageSwitch"
        ></a-switch>
      </div>
      <p class="desc">
        开启后，新消息一条一条在页面弹窗出现。关闭后，消息不再弹窗出现。
      </p>
    </div>
    <c-modal
      v-model="resetPassWordVisible"
      title="重置密码"
      destroyOnClose
      noFooter
    >
      <ResetPassword @resetFinish="resetPasswordFinish" />
    </c-modal>
  </div>
</template>

<script>
import { mapState } from "vuex";
import userDict from "@/dict/user";
import ResetPassword from "@/views/reset-password";
import { getMessageSwitchStatus } from "@/util/common";

export default {
  components: {
    ResetPassword
  },
  data() {
    return {
      userDict,
      resetPassWordVisible: false,
      messageSwitch: true
    };
  },
  computed: {
    ...mapState(["user"])
  },
  methods: {
    // 重置密码
    resetPassWord() {
      this.resetPassWordVisible = true;
    },
    // 重置密码完成回调
    resetPasswordFinish() {
      this.resetPassWordVisible = false;
    },
    // 切换公司
    changeCompany() {
      this.$router.push({ name: "changeCompany" });
    },
    // 切换消息开关
    changeMessageSwitch(val) {
      this.$storage.set("messageSwitch", val);
    },
    // 设置消息开关
    getMessageSwitch() {
      this.messageSwitch = getMessageSwitchStatus();
    }
  },
  created() {
    this.getMessageSwitch();
  }
};
</script>

<style lang="scss" scoped>
.personal-basic {
  padding-top: 40px;
  padding-bottom: 40px;
  ::v-deep .ant-descriptions {
    padding: 0 24px;
    .ant-descriptions-item-label,
    .ant-descriptions-item-content {
      font-size: 16px;
    }
    .ant-descriptions-item-label {
      width: 110px;
      padding-right: 10px;
    }
  }
  .message {
    padding: 0 24px;
  }
}
</style>
